<html>

<body style="padding:10px;">
    <input type="text" id="messageTxt" />
    <button type="button" id="sendBtn">Send</button>
    <div id="messages" style="width: 375px;margin:10 0 0 0px;border-top: 1px solid black;">
    </div>

    <script type="text/javascript">
        var messageTxt = document.getElementById("messageTxt");
        var messages = document.getElementById("messages");
        var sendBtn = document.getElementById("sendBtn")

        w = new WebSocket("ws://localhost:8080/endpoint");
        w.onopen = function () {
            console.log("Websocket connection enstablished");
        };
        w.onclose = function () {
            appendMessage("<div><center><h3>Disconnected</h3></center></div>");
        };
        w.onmessage = function (message) {
            appendMessage("<div>" + message.data + "</div>");
        };

        sendBtn.onclick = function () {
            myText = messageTxt.value;
            messageTxt.value = "";

            appendMessage("<div style='color: red'> me: " + myText + "</div>");
            w.send(myText);
        };

        messageTxt.addEventListener("keyup", function (e) {
            if (e.keyCode === 13) {
                e.preventDefault();

                sendBtn.click();
            }
        });

        function appendMessage(messageDivHTML) {
            messages.insertAdjacentHTML('afterbegin', messageDivHTML);
        }
    </script>
</body>

</html>